<template>
  <!-- hidden PageHeaderWrapper title demo -->
  <page-header-wrapper :title="false">
    <a-card :body-style="{ padding: '24px 32px' }" :bordered="false">
    
      <a-form @submit="handleSubmit" :form="form">
        <a-form-item
          :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
          :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
          label="订单金额"
        >
          <div>{{ this.amount }}</div>
        </a-form-item>
        <a-form-item
          label="支付"
          :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
          :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
        >
          <a-row :gutter="24" v-for="(item, idx) in list" :key="idx">
            <a-col :md="12" :sm="24">
              <a-select v-model="item.payType" placeholder="请选择" @change="change">
                <a-select-option :value="i.id" v-for="i in typeOption" :key="i.id" >{{ i.name }}</a-select-option>
                <a-select-option value="0">欠账</a-select-option>
              </a-select>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-select v-model="item.paymentMethodId" placeholder="请选择">
                <a-select-option :value="i.id" v-for="i in option" :key="i.id">{{ i.name ?? i.accountName }}</a-select-option>
              </a-select></a-col
            ><a-col :md="12" :sm="24">
              <a-input v-model="item.amount" addonAfter="元" placeholder="请输入金额"/></a-col>
            <a-col :md="12" :sm="24">
              <a-button type="danger" @click="handleDel(idx)">删除</a-button>
            </a-col>
          </a-row>
          <a-button type="primary" @click="handAdd()">新增支付</a-button>
        </a-form-item>
        <a-form-item
          :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
          :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
        >
        </a-form-item>
        <a-form-item
          label="备注"
          :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
          :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
        >
          <a-textarea rows="2" v-decorator="['memo']" placeholder="请输入备注" />
        </a-form-item>
        <a-divider />
        <a-form-item
          :wrapperCol="{ span: 24 }" 
          style="text-align: center"
        >
          <a-button htmlType="submit" type="primary" :loading="loading" icon="check">保存</a-button>
          <a-button type="primary" style="background-color:#87B87F!important;border-color:#87B87F!important;margin-left:20px" @click="handBack()">返回</a-button>
        </a-form-item>
      </a-form>
    </a-card>
  </page-header-wrapper>
</template>
  
<script>
import { getStorePayMethodListUsingPOST  } from '@/api/api/xitongguanli.ts'
import { paymentUsingPOST ,getAccRecordUsingGET,getDebtListUsingGET} from '@/api/api/qiantaizhangwu.ts'

export default {
  name: 'CreateFinanceIncomeOrder',
  data() {
    return {
      form: this.$form.createForm(this),
      loading: false,
      option: [],
      typeOption: [],
      list: [
        {
          payType: '',
          paymentMethodId: '',
          amount: this.$route.query.amount,
          orderId: this.$route.params.id,
        },
      ],
      info:{},
      amount:'',
      queryParam: {
        pageNo: 1,
        pageSize: 999,
        queryCondition: '',
        status: 1,
      },
    }
  },
  mounted() {
    this.getDetail()
  },
  methods: {
    change(e){
     this.list.find((item)=> item.payType == e).paymentMethodId = ''
      if(e !== '0'){
        this.option = this.typeOption.find((item) =>item.id == e).paymentMethodList
      }else{
        getDebtListUsingGET(this.queryParam).then((res) => {
          this.option = res.data.list
        })
        .catch((error) => {
          this.$message.error(((error.response || {}).data || {}).msg || '请求出现错误')
        })
      }
    },
    getDetail() {
      getAccRecordUsingGET({ id: this.$route.params.id })
        .then((res) => {
          this.getTypeOption(res.data.storeId)
          this.amount = res.data.amount
          this.list[0].amount = res.data.amount
        })
        .catch(() => {
          this.$message.error('获取详情失败,请联系管理员')
        })
    },
    handBack(){
        this.$router.back()
    },
    handleDel(idx) {
      this.list.splice(
        this.list.findIndex((item, index) => index === idx),
        1
      )
    },
    handAdd() {
      const obj = {
        payType: '',
        paymentMethodId: '',
        amount: '',
      }
      this.list.push(obj)
    },
    getTypeOption(storeId) {
      getStorePayMethodListUsingPOST({...this.queryParam, storeId:storeId  }).then((res) => {
        this.typeOption = res.data.list
      })
      .catch((error) => {
        this.$message.error(((error.response || {}).data || {}).msg || '请求出现错误')
      })
    },
    // handler
    handleSubmit(e) {
      e.preventDefault()
      this.loading = true
      this.form.validateFields((err, values) => {
        if (!err) {
            paymentUsingPOST({ orderId:this.$route.params.id, memo: values.memo},[...this.list.map((item)=>{ return {
              ...item,
              payType:item.payType == '0' ? '0' :'1'
            }})])
            .then((res) => {
              this.loading = false
              this.$message.success('操作成功')
              this.$router.push({ path: `/cashier/paymentRecord/detail/${this.$route.params.id}` })
              // 重置表单数据
              this.form.resetFields()
            })
            .catch((error) => {
              this.loading = false
              this.$message.error(((error.response || {}).data || {}).msg || '请求出现错误')
            })
        }
      })
    },
  },
}
</script>
  